<template>
  <div class="tw-termlist">
    <table v-if="list && list.length>0">
      <tr v-for="row in rows"
        :key="row">
        <template v-for="col in cols">
          <th v-if="list[(row-1)*cols+(col-1)]" :key="col" :style="{padding:padding, borderColor: borderColor, width: thWidth, fontSize: thFontSize, backgroundColor: thBg, color: thColor, fontWeight: thFontWeight}">{{list[(row-1)*cols+(col-1)].name}}</th>
          <th v-else :key="col" class="xnodata"></th>
          <td v-if="list[(row-1)*cols+(col-1)]" :key="col" :style="{padding:padding, backgroundColor: tdBg, borderColor: borderColor, color:tdColor, fontSize: tdFontSize}">{{list[(row-1)*cols+(col-1)].value}}</td>
          <td v-else :key="col" class="xnodata"></td>
        </template>
      </tr>
    </table>

    <div v-else class="tw-libnodata"></div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'tw-lib-term-list',

  props,

  computed: {
    cols () {
      return parseInt(this.columns)
    },

    rows () {
      const rows = this.list.length / this.columns

      if (parseInt(rows) === rows) {
        return parseInt(rows)
      } else {
        return Math.ceil(rows)
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
